﻿@using Newtonsoft.Json
@model NetAjaxApplication.Models.OrderModel

@{
    ViewBag.Title = "Crystal Harmony Quotes";
}

<div id="add-new-client-screen">
    <div id="add-new-client-main-splitter">
        <div id="add-new-client-pannel-splitter">
            <div class="left-panel scroll-panel">
                <div class="tabs">
                    <ul>
                        <li><a href="#tab-clients">CLIENTS</a></li>
                    </ul>

                    <div id="tab-clients">
                        <div class="client-tree">
                        </div>
                    </div>
                </div>
            </div>

            @*right panel*@
            <div class="right-panel scroll-panel">
                @*splash screen*@
                    @Html.Partial("_SplashScreen")
                
                <div class="tabs" data-bind="visible:!isDisplaySplashScreen()">
                    <ul>
                        <li><a href="#tab-client-form" data-bind="text:Client.ClientName">Client name</a></li>
                        <li><a href="#tab-header">Header</a></li>
                        <li><a href="#tab-line-items">Line Items</a></li>
                    </ul>

                    <div id="tab-client-form" data-bind="visible:!isDisplaySplashScreen()" style="display: none;">
                        @Html.Partial("ClientForm")
                    </div>
                    <div id="tab-header">
                        <div class="splitter">
                            <div data-bind="visible:!isDisplaySplashScreen()" style="display: none;">
                                <table id="tblHeader">
                                    <thead>
                                        <tr>
                                            <th>Products</th>
                                            <th></th>
                                            <th>Choises</th>
                                            <th>Price</th>
                                            <th>Quantity</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach: Header">
                                        <tr>
                                            <td data-bind="text: Products">Products</td>
                                            <td>
                                               <input type="checkbox" data-bind="visible: Choises.Checked, checked: Choises.Checked" disabled="disabled"/> 
                                            </td>
                                            <td data-bind="text: Choises.Name">Choises</td>
                                            <td data-bind="text: Price">Price</td>
                                            <td data-bind="text: Quantity">Quantity</td>
                                            <td data-bind="text: Total">Total</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="photo" data-bind="visible:!isDisplaySplashScreen()" style="display: none;">
                                <img src="@Url.Content("~/Images/demo-door.jpg")" alt="photo here"/>
                            
                            </div>    
                        </div>
                    </div>
                    <div id="tab-line-items">
                        @Html.Partial("_TabLineItem")
                    </div>
                </div>

            </div>
        </div>

        <div data-bind="foreach: messages" class="messagelog scroll-panel">
            <div>
                <span data-bind="text: time"></span>
                <span>: </span>
                <span data-bind="text: content"></span>
            </div>

        </div>
    </div>
</div>




@section scripts
{
    <script>
        $(function () {
        
            //splitter
            $('#add-new-client-main-splitter').splitter({
                type: 'h',
                sizeTop: 500
            });

            $('#add-new-client-pannel-splitter').splitter({
                type: 'v',
                sizeLeft: 250,
            });

            $('#tab-header .splitter').splitter({
                type: 'v',
                sizeRight: 280,
            });


          //jquery control
            {
                $('.tabs').tabs();

                $(".client-tree").dynatree({
                    initAjax: { url: "../api/list/getclient" },
                    imagePath: '../Images/',
                    onActivate: function (node) {
                        vm.activeClient(node.data);
                    }
                });

                //line item
                $('#btnAddLineItem').button({
                    icons: {
                        primary: "ui-icon-plusthick"
                    },
                    text: false
                });

                

                $('#tab-line-items .order-tree').dynatree({
                    children: {
                        title: 'Keyline',
                        children: [{ title: 'this is dummy data' }]
                    },
                    classNames: {
                        nodeIcon: ''
                    }
                });
                
                $('#tab-line-items .acc-tree').dynatree({
                    children: {
                        title: 'Acc',
                        children: [{ title: 'acc tree' }]
                    },
                    classNames: {
                        nodeIcon: ''
                    }
                });
                
                $('#tab-line-items .mod-tree').dynatree({
                    children: {
                        title: 'Mod',
                        children: [{ title: 'mod tree' }]
                    },
                    classNames: {
                        nodeIcon: ''
                    }
                });
            }

            

            window.vm = new AddNewClientViewModel(@Html.Raw(Json.Encode(Model)));
            ko.applyBindings(vm);
        });
    </script>
}
